<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>酷炫字体</title>
    <style>
        .work{
            position: absolute;
            top:10px;
            right: 10px;
            background-color: #0E7AE2;
            font-size: 18px;
            padding: 10px;

            border-radius: 10px;

        }
        a{
            display: inline-block;
            height: 50px;
            padding: 0 10px;
            background-color: white;
            margin: 10px;
            line-height: 50px;
            border-radius: 25px;
            text-decoration: none;
        }
        @font-face {
            font-family: 'font name';

        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", "微软雅黑", "\xe8\x93\x9d\xe9\xb2\xb8\xe6\x99\xba\xe8\x90\xa5";

            font-weight:400;

        }

        body {

            background: #111;

        }

        h2 {
            margin: 250px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30vw;
                 font-size: 90px;
            color: transparent;
        }

        h2 span {
            animation: animate 2.5s linear infinite;
            animation-delay: calc(0.1s * var(--i));


        }

        @keyframes animate {
            0% {
                color: #fff;
                filter: blur(2px) hue-rotate(0deg);
                text-shadow: 0 0 10px #00b3ff,
                0 0 20px #00b3ff,
                0 0 40px #00b3ff,
                0 0 120px #00b3ff;

            }
            30% {
                color: transparent;
                filter: blur(2px) hue-rotate(120deg);
                text-shadow: 0 0 10px #00b3ff,
                0 0 120px #00b3ff;

            }
            70% {
                color: transparent;
                filter: blur(2px) hue-rotate(240deg);
                text-shadow: 0 0 10px #00b3ff;


            }
            100% {
                color: transparent;
                box-shadow: none;
                filter: blur(2px) hue-rotate(360deg);
            }

        }
    </style>
</head>
<body>
<div class="work">
    <a href="https://apps.ce.bktencent.com/lanjiang1234/python/homework1/">
        python作业1
    </a>
      <a href="https://apps.ce.bktencent.com/lanjiang1234/python/homework2/">
        python作业2
    </a>
      <a href="https://apps.ce.bktencent.com/lanjiang1234/python/homework3/">
        python作业3
    </a>
        <a href="https://apps.ce.bktencent.com/lanjiang1234/advanced/homework1/">
        python作业4
    </a>
      <a href="https://apps.ce.bktencent.com/lanjiang1234/advanced/homework2/">
        python作业4
    </a>
      <a href="https://apps.ce.bktencent.com/lanjiang1234/advanced/homework3/">
        python作业6
    </a>
</div>
<h2>
    <span style="--i:1;">H</span>
    <span style="--i:2;">E</span>

    <span style="--i:3;">L</span>
    <span style="--i:4;">L</span>
    <span style="--i:5;">O</span>
    <span style="--i:6;"> &nbsp; </span>

    <span style="--i:7;">W</span>
    <span style="--i:9;">O</span>
    <span style="--i:10;">R</span>
    <span style="--i:11;">L</span>
    <span style="--i:12;">D</span>
    <span style="--i:13;">@</span>
</h2>
</body>
</html>